<template>
  <div class="problem w" v-show="initialized">
    <table cellpadding='30' cellspacing='0' width='1200'>
      <thead>
      <tr>
        <th>#</th>
        <th>题名</th>
        <th>上传时间</th>
        <th>难度</th>
      </tr>
      </thead>
      <tbody class="problem_data">
      <tr v-for="problem in problems" >
        <th><span>{{problem.QID}}</span></th>
        <th class="problem_title"> <span :routerIndex="problem.QID" @click="problem_click">{{problem.Title}}</span></th>
        <th><span>{{problem.Time}}</span></th>
        <th><span>{{problem.Difficulty}}</span></th>
      </tr>
      </tbody>
      <tbody class="problem_pagination">
      <tr>
        <td colspan="4">
            <span
              class="icon-circle-left page_change_button btn_silence"
              :class="page_current_index === 1 ? 'btn_forbidden' : 'btn_permit'"
              @click="page_left"
            ></span>
          <span
            class="page_button"
            v-for="index in (Math.ceil((list_length - 1)/10))"
            v-if="list_length<=50"
            :class="index+page_index === pageActive ? 'btn_active' : 'btn_silence'"
            @click="page_change(index)"
          >{{index}}</span>
          <span
            class="page_button"
            v-for="index in 5"
            v-if="list_length>50"
            :class="index+page_index === pageActive ? 'btn_active' : 'btn_silence'"
            @click="page_change(index + page_index)"
          >{{index + page_index}}</span>
          <span
            class="icon-circle-right page_change_button btn_silence"
            :class="page_current_index === Math.ceil(problems.length/10) ? 'btn_forbidden' : 'btn_permit'"
            @click="pageRight"
          ></span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
import axios from "axios";
import qs from "qs";
import { mapGetters } from "vuex";
import { Message } from 'element-ui';




export default {
  name: "problems_list",
  data(){
    return {
      list_length:10,
      problems:[
        {
          QID:1,
          Title:'',
          Time:'',
          Difficulty:"",
        },
        {
          QID:2,
          Title:'',
          Time:'',
          Difficulty:"",
        },
      ],
      start_index: 0,
      end_index: 10,
      pageActive: 1,
      page_current_index: 1,
      page_index: 0,
      initialized:false,
    }
  },
  beforeCreate() {
    this.$store.commit("checkLogin");
  },
  mounted() {

    axios({
      method: 'post',
      url: '/questions_list/get_questions_list',
      data:
      qs.stringify(
        {
          startNum:this.start_index,
          endNum:this.end_index,
        })
      ,
    })
      .then(res => {
        //获取数据
        if(res.data.errcode===0)
        {
          console.log(res.data.questionsList);
          console.log(res.data.totalNum);
          this.list_length=res.data.totalNum;
          console.info(res);
          if(res.data.totalNum<10)
          {
            this.end_index=res.data.totalNum;
          }
          this.problems=res.data.questionsList;
          console.log(this.problems);
          this.initialized=true;
        }
        else if(res.data.errcode===-1)
        {
          Message.error("未知错误");
        }
        else if(res.data.errcode===-2)
        {
          Message.error("序号范围错误");
        }

        Message({
          message: '载入完成',
          type: 'success'
        });
      })
      .catch(function (error) {
        Message.error(error);
      })
  },
  computed:{
      ...mapGetters(['isLogin']),
      ...mapGetters(['currentUser']),
      ...mapGetters(['email']),
      ...mapGetters(['userImage']),
  },
  methods: {
    problem_click(e){
      let dom = e.target;

      if (e.target.nodeName.toLowerCase() === "span") {

        if(this.isLogin)
        {
          console.log(this.isLogin);
          let routerIndex = dom.getAttribute("routerIndex");
          this.$router.push({path:'/problem',query: {problemIndex:routerIndex}})
        }
        else {
          Message({
            message: '尚未登录，请先登录',
            type: 'warning'
          });
          console.log(this.$parent);
        }

      }
    },

    page_change: function (index) {
      this.page_current_index = index
      this.page_changeAll()
    },

    page_left:function (){
      if(this.page_current_index>1)
      {
        this.page_current_index -= 1
        this.page_changeAll()
      }

    },

    pageRight:function (){
      if(this.page_current_index<Math.ceil(this.problems_num/10))
      {
        this.page_current_index += 1
        this.page_changeAll()
      }

    },

    page_changeAll:function (){
      this.start_index = (this.page_current_index - 1) * 10
      this.end_index = this.page_current_index * 10
      axios({
        method: 'post',
        url: '/questions_list/get_questions_list',
        data:
          qs.stringify(
            {
              startNum:this.start_index,
              endNum:this.end_index,
            })//TBD:
        ,
      })
        .then(res => {
          //获取数据
          if(res.data.errcode===0)
          {
            console.log(res.data.questionsList);
            console.log(res.data.totalNum);
            this.list_length=res.data.totalNum;
            console.info(res);
            if(res.data.totalNum<10)
            {
              this.end_index=res.data.totalNum;
            }
            this.problems=res.data.questionsList;
            console.log(this.problems);
          }
          else if(res.data.errcode===-1)
          {
            Message.error("未知错误");
          }
          else if(res.data.errcode===-2)
          {
            Message.error("序号范围错误");
          }
/*
          this.$message({
            message: '载入完成',
            type: 'success'
          });*/
        })
        .catch(function (error) {
          Message.error(error);
        })

      this.pageActive = this.page_current_index
      if(this.page_current_index > 3 && this.page_current_index < Math.ceil(this.problems.length/10) - 2){
        this.page_index = this.page_current_index - 3
      }
      else if(this.page_current_index <= 3){
        this.page_index = 0
      }
      else{
        this.page_index = Math.ceil(this.problems.length/10) - 5
      }
    }
  }
}
</script>

<style scoped>
@import "../../common/stylus/style.css";
@import "../../assets/css/all.css";
@import "../../assets/css/problems_list.css";
</style>